<template>
  <view class="gi-descriptions-item">
    <view class="gi-descriptions-item__label" :style="props.labelStyle">{{ props.label }}：</view>
    <view class="gi-descriptions-item__value" :class="props.valueClass" :style="props.valueStyle">
      <slot>{{ props.value }}</slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { CSSProperties, PropType } from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  value: {
    type: [String, Number],
    default: '',
  },
  labelStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
  valueStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
  valueClass: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss" scoped>
.gi-descriptions-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.5;
  &__label {
    flex-shrink: 0;
    align-self: self-start;
    color: $color-text-2;
  }
  &__value {
    overflow: hidden;
    color: #2662ab;
  }
}
</style>
